<template>
    <div class="result">
        <el-popover v-model:visible="visible" placement="bottom-start" trigger="click" :width="430"
            content="1111111111111111111111111111111111">
            <template #reference>
                <div>
                    {{ result }}
                    <!-- <el-icon-arrowdown v-if="visible"></el-icon-arrowdown>
          <el-icon-arrowup v-else></el-icon-arrowup> -->
                    <el-icon-arrowdown :class="{ rotate: visible }"></el-icon-arrowdown>
                </div>
            </template>
            <div class="container">
                <el-row>
                    <el-col :span="8">
                        <el-radio-group size="small" v-model="radioValue">
                            <el-radio-button label="按城市" value="按城市" />
                            <el-radio-button label="按省份" value="按省份" />
                        </el-radio-group>
                    </el-col>
                    <el-col :offset="1" :span="15">
                        <el-select :teleported="false" size="small" v-model="selectValue" filterable
                            :filter-method="filterMethod" @change="changeSelect" placeholder="请搜索城市"
                            style="width: 240px">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-col>
                </el-row>
                <template v-if="radioValue === '按城市'">
                    <div class="city">
                        <!-- <div class="city-item" v-for="(value, key) in cities">
                        {{ key }}
                    </div> -->
                        <div @click="clickChat(item)" class="city-item" v-for="(item, index) in Object.keys(cities)">
                            {{ item }}
                        </div>

                        <!-- <a :href="`#${item}`" @click="clickChat(item)" class="city-item" v-for="(item, index) in Object.keys(cities)">
                        {{ item }}
                    </a> -->
                    </div>
                    <el-scrollbar max-height="300px">
                        <template v-for="(value, key) in cities" :key="key">
                            <el-row style="margin-bottom: 10px" :id="key">
                                <el-col :span="2">{{ key }}:</el-col>
                                <el-col :span="22" class="city-name">
                                    <div @click="clickItem(item)" class="city-name-item" v-for="(item, index) in value"
                                        :key="item.id">
                                        <div>{{ item.name }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </el-scrollbar>
                </template>
                <template v-else>
                    <div class="province">
                        <div @click="clickChat(item)" class="province-item"
                            v-for="(item, index) in Object.keys(provinces)" :key="index">
                            {{ item }}
                        </div>
                    </div>

                    <el-scrollbar max-height="300px">
                        <template v-for="(item, index) in Object.values(provinces)" :key="index">
                            <template v-for="(item1, index1) in item" :key="index1">
                                <el-row style="margin-bottom: 10px" :id="item1.id">
                                    <el-col :span="3">{{ item1.name }}</el-col>
                                    <el-col :span="21" class="province-name">
                                        <div @click="clickProvince(item2)" class="province-name-item"
                                            v-for="(item2, index2) in item1.data" :key="index2">
                                            {{ item2 }}
                                        </div>
                                    </el-col>
                                </el-row>
                            </template>
                        </template>
                    </el-scrollbar>
                </template>
            </div>
        </el-popover>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import city from "../lib/city";
import { City } from "./types";
import province from "../lib/province.json";

//分发事件
let emits = defineEmits(["changeCity", "changeProvince"]);

let result = ref<string>("请选择");
let visible = ref<boolean>(false);
let radioValue = ref<string>("按城市");
let selectValue = ref<string>("");
let cities = ref(city.cities);
let provinces = ref(province);
let options = ref<City[]>([]);
let allCities = ref<City[]>([]);

let clickItem = (item: City) => {
    result.value = item.name;
    visible.value = false;
    emits("changeCity", item);
};

let clickProvince = (item: string) => {
    result.value = item;
    visible.value = false;
    emits("changeProvince", item);
};

// 点击字母区域
let clickChat = (item: string) => {
    let el = document.getElementById(item);
    if (el) el.scrollIntoView();
};

let filterMethod = (val: string) => {
    let values = Object.values(cities.value).flat(Infinity); // 扁平化
    if (!val) {
        options.value = values;
    } else {
        if (radioValue.value === "按城市") {
            // 中文拼音一起过滤
            options.value = values.filter((item) => {
                return item.name.includes(val) || item.spell.includes(val);
            });
        } else {
            options.value = values.filter((item) => {
                return item.name.includes(val);
            });
        }
    }
};

let changeSelect = (val: number) => {
    let city = allCities.value.find(item => item.id === val);
    result.value = city?.name;
    if (radioValue.value === "按城市") {
        emits("changeCity", city);
    } else {
        emits("changeProvince", city?.name);
    }
}
onMounted(() => {
    let values = Object.values(cities.value).flat(Infinity); // 扁平化
    options.value = values;
    allCities.value = values;
});
</script>

<style lang="scss" scoped>
.result {
    display: flex;
    align-items: center;
    width: fit-content;
    cursor: pointer;
}

svg {
    width: 1em;
    height: 1em;
    position: relative;
    top: 2px;
    margin-left: 4px;
    transition: all 0.25s linear;
}

.rotate {
    transform: rotate(180deg);
}

.container {
    padding: 6px;
}

.city,
.province {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 10px;

    &-item {
        padding: 3px 6px;
        margin-right: 8px;
        border: 1px solid #eee;
        margin-bottom: 6px;
        cursor: pointer;
    }
}

.city-name,
.province-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    &-item {
        margin-right: 6px;
        margin-bottom: 6px;
        cursor: pointer;
    }
}
</style>
